<template>
  <div class="scheme-comparison-container">
    <div class="header">方案比选</div>
    <div class="table-wrapper">
      <table class="scheme-comparison-table">
        <colgroup>
          <col width="80">
          <col width="80">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
          <col width="120">
        </colgroup>
        <thead>
          <tr>
            <th rowspan="2" class="border-right">方案</th>
            <th rowspan="2" class="border-right">问题</th>
            <th colspan="5" class="border-right">电网指标</th>
            <th colspan="4">资源渗透率</th>
          </tr>
          <tr>
            <th class="border-right">解压重过载线路条数</th>
            <th class="border-right">倒送超载主变台数</th>
            <th class="border-right">重过载配变台数</th>
            <th class="border-right">多T接线条数</th>
            <th class="border-right">单辐射线路</th>
            <th>标准接线化率</th>
            <th>运行超过25年变电站个数</th>
            <th>电动汽车充电桩装机容量渗透率</th>
            <th>可调节资源渗透率</th>
            <th>储能渗透率</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2" class="scheme-name border-right">方案1</td>
            <td class="border-right">问题1</td>
            <td class="border-right">15</td>
            <td class="border-right">50</td>
            <td class="border-right">92</td>
            <td class="border-right">839</td>
            <td class="border-right">242</td>
            <td>65%</td>
            <td>66</td>
            <td>25%</td>
            <td>25%</td>
            <td>25%</td>
          </tr>
          <tr>
            <td class="border-right">问题2</td>
            <td class="border-right">40</td>
            <td class="border-right">52</td>
            <td class="border-right">33%</td>
            <td class="border-right">33%</td>
            <td class="border-right">22</td>
            <td>69</td>
            <td>239</td>
            <td>232</td>
            <td>79%</td>
            <td>32</td>
          </tr>
          <tr>
            <td class="scheme-name border-right">方案2</td>
            <td class="border-right">问题1</td>
            <td class="border-right">25%</td>
            <td class="border-right">25%</td>
            <td class="border-right">25%</td>
            <td class="border-right">-</td>
            <td class="border-right">-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SchemeComparison',
  data() {
    return {
      // 如果需要动态数据可以在这里定义
    }
  }
}
</script>

<style scoped>
.scheme-comparison-container {
  font-family: "Microsoft YaHei", "SimHei", sans-serif;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.header {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

.table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.scheme-comparison-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 14px;
  table-layout: fixed;
}

.scheme-comparison-table th,
.scheme-comparison-table td {
  border: 1px solid #ddd;
  padding: 8px 5px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.5;
}

.scheme-comparison-table th {
  background-color: #f5f5f5;
  font-weight: normal;
}

.scheme-comparison-table .border-right {
  border-right: 1px solid #ddd;
}

.scheme-comparison-table .scheme-name {
  font-weight: bold;
  background-color: #f9f9f9;
}

/* 偶数行背景色 */
.scheme-comparison-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 表头第一行样式 */
.scheme-comparison-table thead tr:first-child th {
  font-weight: bold;
  background-color: #eaeaea;
}

/* 表头第二行样式 */
.scheme-comparison-table thead tr:nth-child(2) th {
  padding: 5px;
}
</style>